<template>
  <div class="card-page">
    <tool-bar nav="" :title='action_name + "数据连接"'>
      <el-button size="small" @click="clone_click" v-if="$props.action=='edit'">克隆</el-button>
      <el-button size="small" @click="$router.push('/dev/db-connection/add')" v-if="$props.action=='edit'">新建
      </el-button>
      <el-button size="small" @click="save_click" type="primary"> 保存</el-button>
    </tool-bar>
    <el-row :gutter="12" type="flex">
      <el-col :span="12">
        <el-card shadow="always">
          <template #header><span>基本信息</span></template>
          <kv label="数据类型">
            <selector v-model="info.type" enum="SqlDatabaseEnum" chk="*"/>
          </kv>
          <kv label="名称">
            <el-input v-model="info.name" chk="*"/>
          </kv>

          <kv label="编码">
            <el-input v-model="info.code" />
          </kv>
          <kv label="备注">
            <el-input v-model="info.remark" type="textarea"/>
          </kv>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="always">

          <template #header><span>扩展信息</span></template>
          <kv label="Ip">
            <el-input v-model="info.host"/>
          </kv>
          <kv label="端口">
            <el-input v-model="info.port"/>
          </kv>
          <kv label="数据库名称">
            <el-input v-model="info.dbName"/>
          </kv>
          <kv label="用户名">
            <el-input v-model="info.userName"/>
          </kv>
          <kv label="密码">
            <el-input v-model="info.password"/>
          </kv>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
/**
 * Created by CodeGenerator  at 2021-04-11 23:42:19
 */





//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  DatabaseEnum: jv.enum.SqlDatabaseEnum.getData(),
  info: {}, //子对象需要声明。
});
const info = $computed(() => $data.info);

const $props = defineProps({
  action: {type: String},
  id: {type: String}
});


//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);


const action_name = $computed(function () {
  return {add: "添加", edit: "修改"}[$props.action]
});

const loadData = function () {
  if (!$props.id) return;
  jv.$http.post("/dev/db-connection/detail/" + $props.id).then(res => {
    $data.info = res.data.data;
  });
};
const save_click = function () {
//校验
  if (jv.chk_main($data) == false) {
    return;
  }
  jv.$http.post("/dev/db-connection/save", $data.info).then(res => {
//[axios拦截器中已处理了异常]。
    jv.info(action_name + " 成功");
    if ($props.action == "add") {
      jv.$router.push("/dev/db-connection/edit/" + res.data.data)
    } else if ($props.action == "edit") {
      jv.$router.push("/dev/db-connection/list")
    }
  })
};
const clone_click = async function () {
  $data.info.id = "";
  $data.info.name = $data.info.name + "_clone"
  save_click();
};

onMounted(function () {
  loadData();
})


</script>
